<template>
  <div class="chat-conversation">
    <!-- {{ modelValue }} -->
    <div class="message-list" ref="listRef">
      <Message
        v-for="item in messages"
        :key="item"
        :value="item"
        :avatar="item.from == targetUserId ? modelValue.avatar : avatarOfMe"
      />
      <!-- 111 -->
    </div>
    <!-- <div class="send-input" contenteditable="true"></div> -->
    <InputBox @submit="onSubmit"></InputBox>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, watch, inject } from "vue";
import Message from "./Message.vue";
import {
  listMessage,
  listMessageByRange,
  listMessageByDate,
  saveMessage,
} from "@/utils/chatMessage";

import InputBox from "./InputBox.vue";
import { useIMStore } from "@/stores/im";
import { useUserStore } from "@/stores/user";
import { useChatMessageStore } from "@/stores/chatMessage";
const props = defineProps({
  modelValue: {
    type: Object,
    default: {},
  },
});

const targetUserId = computed(() => props.modelValue.userId);
// console.log(targetUserId.value);

const avatarOfMe = useUserStore().userInfo.avatar;

const messages = ref<any>([]);

watch(props, () => {
  console.log("update modelValue");

  messages.value = [];
  loadData();
});

const listRef = ref<HTMLElement>();

function loadMessages() {
  const list = listMessage(targetUserId);
  messages.value = list;
}
import type { SocketClient } from "@/plugins/websocket";
import type ChatMessageHolder from "@/plugins/ChatMessageHolder";
const socketClient = inject<SocketClient>("socket-client")!;

const messageHolder = <ChatMessageHolder>inject("chat-message-holder");

console.log(messageHolder);

socketClient.on("message", (msg: any) => {
  console.log(msg);
  // {
  //   id: new Date(),
  //   message: msg.data,
  //   userId: msg.from,
  //   time: new Date(msg.time),
  // }
  messages.value.push(msg);
  console.log(messages.value);
  nextTick(() => {
    listRef.value?.scrollTo({
      top: 99999,
    });
  });
  messageHolder.add(msg.from, msg);
});

socketClient.on("list-msg", (list: any) => {
  console.log(list);
  // {
  //   id: new Date(),
  //   message: msg.data,
  //   userId: msg.from,
  //   time: new Date(msg.time),
  // }
});

function loadData() {
  const list = messageHolder.loadMessageByUser(targetUserId.value);
  console.log(list);
  messages.value.push(...list);
  nextTick(() => {
    listRef.value?.scrollTo({
      top: 99999,
    });
  });
}

loadData();

function onSubmit(value: any) {
  const msg = {
    type: "message",
    from: useUserStore().userId,
    to: targetUserId.value,
    data: value,
    time: new Date(),
  };
  messages.value.push(msg);

  console.log(messages.value);

  nextTick(() => {
    listRef.value?.scrollTo({
      top: 99999,
    });
  });

  // const message = {
  //   type: "message",
  //   from: useUserStore().userId,
  //   to: targetUserId.value,
  //   data: value,
  // };

  socketClient.send(msg);
  messageHolder.add(targetUserId.value, msg);
}
</script>

<style scoped lang="less">
.chat-conversation {
  width: 100%;
  height: 100%;
  height: calc(100vh - 10rem);
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  // grid-template-rows: repeat(2, 1fr); /* 容器分为两行 */
  // grid-template-columns: 1fr; /* 容器只有一列 */
}
.message-list {
  width: 100%;
  flex: 1;
  background: #fff;
  border-radius: var(--border-radius);
  margin-bottom: 5px;
  overflow: auto;
  scroll-behavior: smooth;
}
.send-input {
  // width: 100%;
  // height: 10rem;
  // background: #fff;
  // padding: 5px;
  // border-radius: var(--border-radius);
  // transition: all 0.2s linear;

  // &:empty::before {
  //   content: "按回车发送消息(Ctrl + Enter换行)";
  //   color: #777;
  // }

  // &:focus {
  //   outline: none;
  //   border: 1px solid var(--app-main-color);
  // }
}
</style>
